<template>
    <div id='daily-index'>
        <!-- <h1 class="card-title">
            <span>每日数据</span>
        </h1> -->
        <!-- <div class="user-data loading-min-height">
            <loading v-if='loading_count' mode='full'></loading>
            <transition name='fade'>
                <ul class="user-data__list" v-if='hasUserCount'>
                    <li class="user-data__item">
                        <span> {{ userCount.newCount }} </span>
                        <p>今日新增用户</p>
                    </li>
                    <li class="user-data__item">
                        <span> {{ userCount.totalCount }} </span>
                        <p>总用户数</p>
                    </li>
                </ul>
            </transition>
        </div> -->
        <div class="loading-min-height">
            <loading v-if='loading' mode='full'></loading>
            <transition name='fade'>
                <div class="total-count" v-if='hasDaily'>
                    <div class="total-count__item">
                        <p>{{daily.RegisterNow || placeholder}} / {{daily.RegisterYesterday || placeholder}}</p>
                        <span>当前注册人数 / 昨日注册人数</span>
                    </div>
                    <div class="total-count__item">
                        <p>{{daily.borrowTimesNow || placeholder}} / {{daily.borrowTimesYesterday || placeholder}}</p>
                        <span>当前发布借款次数 / 昨日发布借款次数</span>
                    </div>
                    <div class="total-count__item">
                        <p>{{daily.countApplyLendNow || placeholder}} / {{daily.countApplyLendYesterday || placeholder}} / {{daily.countApplyLend || placeholder}}</p>
                        <span>今日申请量 / 昨日申请量 / 总申请量</span>
                    </div>
                    <div class="total-count__item">
                        <p>{{daily.lendTimesNow || placeholder}} / {{daily.lendTimesYesterday || placeholder}}</p>
                        <span>当前发布出借次数 / 昨日发布出借次数</span>
                    </div>
                    <div class="total-count__item">
                        <p>{{daily.dealNumNow || placeholder}} / {{daily.dealNumYesterday || placeholder}}</p>
                        <span>当前成交笔数 / 昨日成交笔数</span>
                    </div>
                    <div class="total-count__item">
                        <p>{{daily.volumeNow | toYuan}} / {{daily.volumeYesterday | toYuan}}元</p>
                        <span>当前成交金额 / 昨日成交金额(元)</span>
                    </div>
                    <div class="total-count__item">
                        <p>{{daily.creditReportPayAmountNow | toYuan}}元 / {{daily.creditReportPayAmountYesterday | toYuan}}元</p>
                        <span>信用报告当前付费金额 / 昨日付费金额</span>
                    </div>
                    <div class="total-count__item">
                        <p>{{daily.balance | toYuan}}元 / {{daily.balanceYesterday | toYuan}}元</p>
                        <span>当前账户余额 / 昨日账户余额</span>
                    </div>
                    <div class="total-count__item">
                        <p>{{daily.receiptingTimesNow || placeholder}} / {{daily.receiptingTimesAll || placeholder}}</p>
                        <span>当前补借条次数 / 全部补借条次数</span>
                    </div>
                </div>
            </transition>
        </div>

        <h1 class="card-title">
            <span>数据记录</span>
        </h1>
        <div class="loading-min-height">
            <loading v-if='loading' mode='full'></loading>
            <div ref='chart' class="data-chart" style='height:700px'></div>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'
    import echarts from 'echarts'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                placeholder:'--',
                recommend:0,
                show_modal_detail:false,
                channel:'',
                name:'',
                userCount:'',
                curDetail:'',
                listInfo:{},
                daily:{},
                records:[],
                dateFrom:'',
                dateTo:'',
                mobile:'',
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            dailyList(){
                if(this.daily.DailyDataList.length) return _.orderBy(this.daily.DailyDataList,'format')
                return []
            },
            allDate(){
                if(this.dailyList.length) return _.map(this.dailyList,'format') 
                return []
            },
            applyLend(){
                if(this.daily.DailyDataList.length) return _.map(this.dailyList,'ApplyLend')
                return []
            },
            dealNum(){
                if(this.daily.DailyDataList.length) return _.map(this.dailyList,'DealNum') 
                return []
            },
            volume(){
                if(this.daily.DailyDataList.length) {
                    let amount = _.map(this.dailyList,'Volume') 
                    _.each(amount,(value,index)=>{
                        amount[index] = value / 100
                    })
                    return amount
                } 
                return []
            },
            hasDaily(){
                return !_.isEmpty(this.daily)
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },

            // function


            showModalDetail(item){
                this.show_modal_detail = true
                this.curDetail = item
            },
            goDetail(item){
                this.$router.push({
                    name:'user-detail',
                    params:{
                        id:item.userId,
                    }
                })
            },
            getList(num){
                this.loading = true
                let params = {
                    pageSize:20,
                    pageNo:num,
                    stringdateFrom:this.dateFrom,
                    stringdateTo:this.dateTo,
                    mobile:this.mobile,
                    name:this.name,
                    channelStr:this.channel,
                }
                allApi.userList(params)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            setRecommend(item){
                this.loading = true
                let params = {
                    userId:item.userId,
                }
                allApi.userRecommend(params)
                .then(result=>{
                    this.loading = false
                    this.getList(this.listInfo.pageNum)
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            delRecommend(item){
                this.loading = true
                let params = {
                    userId:item.userId,
                }
                allApi.delRecommend(params)
                .then(result=>{
                    this.loading = false
                    this.getList(this.listInfo.pageNum)
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getDaily(){
                this.loading = true
                allApi.dataList()
                .then(result=>{
                    this.loading = false
                    this.daily = result
                    this.setChart()
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            setChart(){
                let option = {
                    title: {
                        //text: '2000-2016年中国汽车销量及增长率'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    legend: {
                        data: ['发布出借数量','成交订单量','成交金额']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: this.allDate
                    }],
                    yAxis: [ {
                        type: 'value',
                        name: '',
                        position: 'left'
                    }],
                    dataZoom: [{
                        startValue: moment().subtract(15, 'days').format('YYYY-MM-DD')
                    }, {
                        type: 'inside'
                    }],
                    series: [ {
                        name: '发布出借数量',
                        type: 'bar',
                        yAxisIndex: 0,
                        stack: '发布出借数量',
                            label: {
                                normal: {
                                    // show: true,
                                    position: 'top'
                                }
                            },
                        data: this.applyLend
                    },{
                        name: '成交订单量',
                        type: 'bar',
                        yAxisIndex: 0,
                        stack: '成交订单量',
                            label: {
                                normal: {
                                    // show: true,
                                    position: 'top'
                                }
                            },
                        data: this.dealNum
                    }, {
                        name: '成交金额',
                        type: 'bar',
                        yAxisIndex: 0,
                        stack: '成交金额',
                            label: {
                                normal: {
                                    // show: true
                                }
                            },
                        data: this.volume
                    }]
                };

                
                this.$nextTick(()=>{
                    let width = $('#data-list').width()
                    $(this.$refs.chart).css('width',width+'px')
                    
                    let myChart = echarts.init(this.$refs.chart);
                    myChart.setOption(option);
                })
            }
        },
        created(){
            // this.getAccount()
            this.getDaily()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #daily-index{
        padding:0 40px 20px 40px;
        box-sizing:border-box;
        overflow:auto;
        .data-chart{
            padding-top: 20px;
        }
        .user-data{
            padding-bottom: 20px;
        }
        .user-data__list{
            display:flex;
            padding-top: 20px;
            min-height:140px;
        }
        .user-data__item{
            display:flex;
            flex-direction: column;
            justify-content:center;
            align-items:center;
            width: 200px;
            height:120px;
            border:1px solid $sectionColor;
            border-radius:4px;
            box-shadow:rgba(0, 0, 0, 0.03) 0px 1px 6px, rgba(0, 0, 0, 0.04) 0px 1px 4px;
            margin-right:20px;
            span{
                display: block;
                font-size: 30px;
                color:$green;
            }
            p{
                padding-top: 10px;
            }
        }
    }
</style>
